<page-header [action]="phActionTpl">
  <ng-template #phActionTpl></ng-template>
</page-header>

<nz-card nzTitle="商品基础信息" *ngIf="itemOverView.length > 0">
  <nz-table #shopTransTable [nzData]="itemOverView" [nzShowPagination]="false" nzTableLayout="fixed">
    <tbody>
      <tr>
        <td nzAlign="left">
          <nz-comment>
            <nz-comment-content>
              <nz-image
                [nzWidth]="100"
                [nzHeight]="100"
                style="float: left; padding-right: 10px"
                nzSrc="{{ shopTransTable.data[0]['image'] }}"
              ></nz-image>
              <p>{{ shopTransTable.data[0]['item_name'] }}</p>
              <p>商品ID: {{ shopTransTable.data[0]['item_id'] }}</p>
              <p>商品货号: {{ shopTransTable.data[0]['item_no'] }}</p>
            </nz-comment-content>
          </nz-comment>
        </td>
        <td nzAlign="left">
          <p>上新时间：{{ shopTransTable.data[0]['new_arrival'] | _date: 'yyyy-MM-dd' }}</p>
        </td>
      </tr>
    </tbody>
  </nz-table>
</nz-card>

<nz-card>
  <form nz-form class="search__form">
    <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
      <div nz-col nzMd="12" nzSm="24">
        <nz-form-control>
          <span>统计时间：{{ statistics_date }}</span>
        </nz-form-control>
      </div>
      <div nz-col nzMd="12" nzSm="24">
        <nz-form-control>
          <nz-radio-group [(ngModel)]="q.dateType" name="dateType" (ngModelChange)="dateTypeChange($event)">
            <label nz-radio [nzValue]="1">昨日</label>
            <label nz-radio [nzValue]="2">近7天</label>
            <label nz-radio [nzValue]="3">近30天</label>
            <label nz-radio [nzValue]="4">日</label>
            <nz-date-picker
              *ngIf="q.dateType == 4"
              [(ngModel)]="q.dateVal"
              name="dateVal"
              style="margin-right: 24px"
              (ngModelChange)="datePickerChange($event)"
            ></nz-date-picker>
            <label nz-radio [nzValue]="5">月</label>
            <nz-date-picker
              nzMode="month"
              *ngIf="q.dateType == 5"
              name="dateVal"
              [(ngModel)]="q.dateVal"
              (ngModelChange)="datePickerChange($event)"
            ></nz-date-picker>
          </nz-radio-group>
        </nz-form-control>
      </div>
    </div>
  </form>
</nz-card>

<nz-card nzTitle="销售转化">
  <div nz-row [nzGutter]="24" class="pt-lg" *ngIf="factors">
    <div nz-col nzXs="12" nzSm="6" nzMd="6" nzLg="3">
      <g2-card [title]="'曝光量'" total="{{ factors['ctm_item_view_cnt'] }}" contentHeight="30px">
        <trend [flag]="factors['ctm_item_view_cnt_compare'] > 0 ? 'up' : 'down'" style="display: block; margin-top: 2px">
          {{ compareText }}
          <span class="pl-sm" [style]="factors['ctm_item_view_cnt_compare'] > 0 ? 'color: red' : 'color:green'">
            {{ factors['ctm_item_view_cnt_compare'] * 100 | number: '0.2-2' }}%
          </span>
        </trend>
      </g2-card>
    </div>
    <div nz-col nzXs="12" nzSm="6" nzMd="6" nzLg="3">
      <g2-card [title]="'曝光点击率'" total="{{ factors['ctm_item_view_rate_new'] * 100 | number: '0.2-2' }}%" contentHeight="30px">
        <trend [flag]="factors['ctm_item_view_rate_new_compare'] > 0 ? 'up' : 'down'" style="display: block; margin-top: 2px">
          {{ compareText }}
          <span class="pl-sm" [style]="factors['ctm_item_view_rate_new_compare'] > 0 ? 'color: red' : 'color:green'">
            {{ factors['ctm_item_view_rate_new_compare'] * 100 | number: '0.2-2' }}%
          </span>
        </trend>
      </g2-card>
    </div>
    <div nz-col nzXs="12" nzSm="6" nzMd="6" nzLg="3">
      <g2-card [title]="'访客数'" total="{{ factors['ctm_item_click_uv'] }}" contentHeight="30px">
        <trend [flag]="factors['ctm_item_click_uv_compare'] > 0 ? 'up' : 'down'" style="display: block; margin-top: 2px">
          {{ compareText }}
          <span class="pl-sm" [style]="factors['ctm_item_click_uv_compare'] > 0 ? 'color: red' : 'color:green'">
            {{ factors['ctm_item_click_uv_compare'] * 100 | number: '0.2-2' }}%
          </span>
        </trend>
      </g2-card>
    </div>
    <div nz-col nzXs="12" nzSm="6" nzMd="6" nzLg="3">
      <g2-card [title]="'浏览量'" total="{{ factors['ctm_item_click_cnt'] }}" contentHeight="30px">
        <trend [flag]="factors['ctm_item_click_cnt_compare'] > 0 ? 'up' : 'down'" style="display: block; margin-top: 2px">
          {{ compareText }}
          <span class="pl-sm" [style]="factors['ctm_item_click_cnt_compare'] > 0 ? 'color: red' : 'color:green'">
            {{ factors['ctm_item_click_cnt_compare'] * 100 | number: '0.2-2' }}%
          </span>
        </trend>
      </g2-card>
    </div>
    <div nz-col nzXs="12" nzSm="6" nzMd="6" nzLg="3">
      <g2-card [title]="'加购人数'" total="{{ factors['item_cart_uv'] }}" contentHeight="30px">
        <trend [flag]="factors['item_cart_uv_compare'] > 0 ? 'up' : 'down'" style="display: block; margin-top: 2px">
          {{ compareText }}
          <span class="pl-sm" [style]="factors['item_cart_uv_compare'] > 0 ? 'color: red' : 'color:green'">
            {{ factors['item_cart_uv_compare'] * 100 | number: '0.2-2' }}%
          </span>
        </trend>
      </g2-card>
    </div>
    <div nz-col nzXs="12" nzSm="6" nzMd="6" nzLg="3">
      <g2-card [title]="'加购件数'" total="{{ factors['item_cart_cnt'] }}" contentHeight="30px">
        <trend [flag]="factors['item_cart_cnt_compare'] > 0 ? 'up' : 'down'" style="display: block; margin-top: 2px">
          {{ compareText }}
          <span class="pl-sm" [style]="factors['item_cart_cnt_compare'] > 0 ? 'color: red' : 'color:green'">
            {{ factors['item_cart_cnt_compare'] * 100 | number: '0.2-2' }}%
          </span>
        </trend>
      </g2-card>
    </div>
    <div nz-col nzXs="12" nzSm="6" nzMd="6" nzLg="3">
      <g2-card [title]="'加购率'" total="{{ factors['ctm_cart_view_rate'] * 100 | number: '0.2-2' }}%" contentHeight="30px">
        <trend [flag]="factors['ctm_cart_view_rate_compare'] > 0 ? 'up' : 'down'" style="display: block; margin-top: 2px">
          {{ compareText }}
          <span class="pl-sm" [style]="factors['ctm_cart_view_rate_compare'] > 0 ? 'color: red' : 'color:green'">
            {{ factors['ctm_cart_view_rate_compare'] * 100 | number: '0.2-2' }}%
          </span>
        </trend>
      </g2-card>
    </div>
    <div nz-col nzXs="12" nzSm="6" nzMd="6" nzLg="3">
      <g2-card [title]="'下单人数'" total="{{ factors['order_uv'] }}" contentHeight="30px">
        <trend [flag]="factors['order_uv_compare'] > 0 ? 'up' : 'down'" style="display: block; margin-top: 2px">
          {{ compareText }}
          <span class="pl-sm" [style]="factors['order_uv_compare'] > 0 ? 'color: red' : 'color:green'">
            {{ factors['order_uv_compare'] * 100 | number: '0.2-2' }}%
          </span>
        </trend>
      </g2-card>
    </div>
    <div nz-col nzXs="12" nzSm="6" nzMd="6" nzLg="3">
      <g2-card [title]="'下单件数'" total="{{ factors['item_order_cnt'] }}" contentHeight="30px">
        <trend [flag]="factors['item_order_cnt_compare'] > 0 ? 'up' : 'down'" style="display: block; margin-top: 2px">
          {{ compareText }}
          <span class="pl-sm" [style]="factors['item_order_cnt_compare'] > 0 ? 'color: red' : 'color:green'">
            {{ factors['item_order_cnt_compare'] * 100 | number: '0.2-2' }}%
          </span>
        </trend>
      </g2-card>
    </div>
    <div nz-col nzXs="12" nzSm="6" nzMd="6" nzLg="3">
      <g2-card [title]="'下单转化率'" total="{{ factors['ctm_order_view_rate'] * 100 }}%" contentHeight="30px">
        <trend [flag]="factors['ctm_order_view_rate_compare'] > 0 ? 'up' : 'down'" style="display: block; margin-top: 2px">
          {{ compareText }}
          <span class="pl-sm" [style]="factors['ctm_order_view_rate_compare'] > 0 ? 'color: red' : 'color:green'">
            {{ factors['ctm_order_view_rate_compare'] * 100 | number: '0.2-2' }}%
          </span>
        </trend>
      </g2-card>
    </div>
    <div nz-col nzXs="12" nzSm="6" nzMd="6" nzLg="3">
      <g2-card [title]="'订单确认人数'" total="{{ factors['item_verified_uv'] }}" contentHeight="30px">
        <trend [flag]="factors['item_verified_uv_compare'] > 0 ? 'up' : 'down'" style="display: block; margin-top: 2px">
          {{ compareText }}
          <span class="pl-sm" [style]="factors['item_verified_uv_compare'] > 0 ? 'color: red' : 'color:green'">
            {{ factors['item_verified_uv_compare'] * 100 | number: '0.2-2' }}%
          </span>
        </trend>
      </g2-card>
    </div>
    <div nz-col nzXs="12" nzSm="6" nzMd="6" nzLg="3">
      <g2-card [title]="'订单确认件数'" total="{{ factors['item_verified_cnt'] }}" contentHeight="30px">
        <trend [flag]="factors['item_verified_cnt_compare'] > 0 ? 'up' : 'down'" style="display: block; margin-top: 2px">
          {{ compareText }}
          <span class="pl-sm" [style]="factors['item_verified_cnt_compare'] > 0 ? 'color: red' : 'color:green'">
            {{ factors['item_verified_cnt_compare'] * 100 | number: '0.2-2' }}%
          </span>
        </trend>
      </g2-card>
    </div>
    <div nz-col nzXs="12" nzSm="6" nzMd="6" nzLg="3">
      <g2-card [title]="'心愿单(收藏)数'" total="{{ factors['item_wishlist_cnt'] }}" contentHeight="30px">
        <trend [flag]="factors['item_wishlist_cnt_compare'] > 0 ? 'up' : 'down'" style="display: block; margin-top: 2px">
          {{ compareText }}
          <span class="pl-sm" [style]="factors['item_wishlist_cnt_compare'] > 0 ? 'color: red' : 'color:green'">
            {{ factors['item_wishlist_cnt_compare'] * 100 | number: '0.2-2' }}%
          </span>
        </trend>
      </g2-card>
    </div>
  </div>
  <nz-space></nz-space>
  <div nz-col nzSpan="24">
    <chart-echarts [option]="option" *ngIf="option"></chart-echarts>
    <nz-empty nzNotFoundImage="simple" *ngIf="!option"></nz-empty>
  </div>
</nz-card>

<nz-card nzTitle="SKU销售详情" *ngIf="skuIndicate">
  <nz-table #skuTable [nzData]="skuIndicate" [nzShowPagination]="false" nzTableLayout="fixed">
    <thead>
      <tr>
        <th nzAlign="center">SKU ID</th>
        <th nzAlign="center">SKU 信息</th>
        <th nzAlign="center">加购件数</th>
        <th nzAlign="center">加购人数</th>
        <th nzAlign="center">订单确认件数</th>
        <th nzAlign="center">订单确认人数</th>
        <th nzAlign="center">操作</th>
      </tr>
    </thead>
    <tbody>
      <ng-container *ngFor="let data of skuTable.data">
        <tr>
          <td nzAlign="center">
            {{ data['sku_id'] }}
          </td>
          <td nzAlign="center">
            {{ data['sku_name'] }}
          </td>
          <td nzAlign="center">
            {{ data['sku_cart_cnt'] }}
          </td>
          <td nzAlign="center">
            {{ data['sku_cart_uv'] }}
          </td>
          <td nzAlign="center">
            {{ data['sku_verified_cnt'] }}
          </td>
          <td nzAlign="center">
            {{ data['sku_verified_uv'] }}
          </td>
          <td nzAlign="center">
            <a>查看趋势</a>
          </td>
        </tr>
      </ng-container>
    </tbody>
  </nz-table>
</nz-card>

<nz-card nzTitle="流量来源">
  <nz-table #expandTable [nzData]="listOfMapData" [nzShowPagination]="false">
    <thead>
      <tr>
        <th nzAlign="center" nzWidth="5%"></th>
        <th nzAlign="center">流量来源</th>
        <th nzAlign="center" colspan="3">加购人数</th>
        <th nzAlign="center">下单转化率</th>
        <th nzAlign="center">操作</th>
      </tr>
    </thead>
    <tbody>
      <ng-container *ngFor="let data of expandTable.data">
        <ng-container *ngFor="let item of mapOfExpandedData[data['source_id']]">
          <tr *ngIf="(item['parent'] && item['parent']['expand']) || !item['parent']">
            <td
              [nzShowExpand]="!!item['children']"
              [(nzExpand)]="item['expand']"
              (nzExpandChange)="collapse(mapOfExpandedData[data['source_id']], item, $event)"
            >
            </td>
            <td nzAlign="left">
              <p>{{ item['source']['name'] }}</p>
            </td>
            <td nzAlign="center">
              <p>{{ item['ctm_item_click_uv'] }}</p>
              <trend
                *ngIf="item['ctm_item_click_uv_compare']"
                [flag]="item['ctm_item_click_uv_compare'] > 0 ? 'up' : 'down'"
                style="display: block; margin-top: 2px"
              >
                {{ compareText }}
                <span class="pl-sm" [style]="item['ctm_item_click_uv_compare'] > 0 ? 'color: red' : 'color:green'">
                  {{ item['ctm_item_click_uv_compare'] * 100 | number: '0.2-2' }}%
                </span>
              </trend>
            </td>
            <td nzAlign="center">
              <p>{{ item['item_cart_uv'] }}</p>
              <trend
                *ngIf="item['item_cart_uv_compare']"
                [flag]="item['item_cart_uv_compare'] > 0 ? 'up' : 'down'"
                style="display: block; margin-top: 2px"
              >
                {{ compareText }}
                <span class="pl-sm" [style]="item['item_cart_uv_compare'] > 0 ? 'color: red' : 'color:green'">
                  {{ item['item_cart_uv_compare'] * 100 | number: '0.2-2' }}%
                </span>
              </trend>
            </td>
            <td nzAlign="center">
              <p>{{ item['order_uv'] }}</p>
              <trend
                *ngIf="item['order_uv_compare']"
                [flag]="item['order_uv_compare'] > 0 ? 'up' : 'down'"
                style="display: block; margin-top: 2px"
              >
                {{ compareText }}
                <span class="pl-sm" [style]="item['order_uv_compare'] > 0 ? 'color: red' : 'color:green'">
                  {{ item['order_uv_compare'] * 100 | number: '0.2-2' }}%
                </span>
              </trend>
            </td>
            <td nzAlign="center">
              <p>{{ item['ctm_order_view_rate'] | number: '0.2-2' }}%</p>
              <trend
                *ngIf="item['ctm_order_view_rate_compare']"
                [flag]="item['ctm_order_view_rate_compare'] > 0 ? 'up' : 'down'"
                style="display: block; margin-top: 2px"
              >
                {{ compareText }}
                <span class="pl-sm" [style]="item['ctm_order_view_rate_compare'] > 0 ? 'color: red' : 'color:green'">
                  {{ item['ctm_order_view_rate_compare'] * 100 | number: '0.2-2' }}%
                </span>
              </trend>
            </td>
            <td nzAlign="center"><a>查看趋势</a></td>
          </tr>
        </ng-container>
      </ng-container>
    </tbody>
  </nz-table>
</nz-card>
